<template>
  <div class="inventory-management">
    <div class="page-header">
      <h2>配件库存管理</h2>
      <Space>
        <Button @click="showAddItemModal = true">
          <IconifyIcon icon="ant-design:plus-outlined" />
          新增配件
        </Button>
        <Button type="primary" @click="showInboundModal = true">
          <IconifyIcon icon="ant-design:import-outlined" />
          入库
        </Button>
        <Button @click="showOutboundModal = true">
          <IconifyIcon icon="ant-design:export-outlined" />
          出库
        </Button>
      </Space>
    </div>

    <!-- 统计卡片 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="总库存数"
          :value="statistics.totalItems"
          :change="statistics.totalChange"
          icon="ant-design:database-outlined"
          color="#1890ff"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="库存总值"
          :value="statistics.totalValue"
          :change="statistics.valueChange"
          icon="ant-design:dollar-outlined"
          color="#52c41a"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="预警数量"
          :value="statistics.warningItems"
          :change="statistics.warningChange"
          icon="ant-design:warning-outlined"
          color="#faad14"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="本月出入库"
          :value="statistics.monthlyTransactions"
          :change="statistics.transactionChange"
          icon="ant-design:swap-outlined"
          color="#722ed1"
        />
      </Col>
    </Row>

    <!-- 搜索表单 -->
    <Card class="search-card">
      <Form layout="inline" :model="searchForm" class="search-form">
        <FormItem label="配件名称">
          <Input
            v-model:value="searchForm.name"
            placeholder="请输入配件名称"
            allow-clear
          />
        </FormItem>
        <FormItem label="配件类型">
          <Select
            v-model:value="searchForm.category"
            placeholder="请选择类型"
            allow-clear
            style="width: 120px"
          >
            <SelectOption value="electrical">电气配件</SelectOption>
            <SelectOption value="plumbing">水管配件</SelectOption>
            <SelectOption value="appliance">家电配件</SelectOption>
            <SelectOption value="furniture">家具配件</SelectOption>
            <SelectOption value="structural">结构配件</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="供应商">
          <Input
            v-model:value="searchForm.supplier"
            placeholder="请输入供应商"
            allow-clear
          />
        </FormItem>
        <FormItem label="库存状态">
          <Select
            v-model:value="searchForm.status"
            placeholder="请选择状态"
            allow-clear
            style="width: 120px"
          >
            <SelectOption value="normal">正常</SelectOption>
            <SelectOption value="warning">预警</SelectOption>
            <SelectOption value="out_of_stock">缺货</SelectOption>
          </Select>
        </FormItem>
        <FormItem>
          <Space>
            <Button type="primary" @click="handleSearch">
              <IconifyIcon icon="ant-design:search-outlined" />
              搜索
            </Button>
            <Button @click="handleReset">
              <IconifyIcon icon="ant-design:reload-outlined" />
              重置
            </Button>
          </Space>
        </FormItem>
      </Form>
    </Card>

    <!-- 库存预警 -->
    <Card v-if="warningItems.length > 0" title="库存预警" class="warning-card">
      <div class="warning-list">
        <div v-for="item in warningItems" :key="item.id" class="warning-item">
          <div class="warning-info">
            <span class="item-name">{{ item.name }}</span>
            <span class="item-code">{{ item.code }}</span>
          </div>
          <div class="warning-status">
            <Tag :color="getStatusColor(item.status)">
              {{ getStatusText(item.status) }}
            </Tag>
            <span class="stock-count"
              >库存: {{ item.stock }}/{{ item.minStock }}</span
            >
          </div>
          <Button type="link" size="small" @click="quickReplenish(item)">
            快速补货
          </Button>
        </div>
      </div>
    </Card>

    <!-- 库存列表 -->
    <Card class="table-card">
      <Table
        :columns="columns"
        :data-source="filteredInventory"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div class="item-info">
              <div class="item-name">{{ record.name }}</div>
              <div class="item-code">{{ record.code }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'category'">
            <Tag :color="getCategoryColor(record.category)">
              {{ getCategoryText(record.category) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'stock'">
            <div class="stock-info">
              <span class="stock-count">{{ record.stock }}</span>
              <Progress
                :percent="getStockPercent(record)"
                :stroke-color="getStockColor(record)"
                :show-info="false"
                size="small"
              />
            </div>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'price'">
            <span class="price-text">¥{{ record.price }}</span>
          </template>
          <template v-else-if="column.key === 'totalValue'">
            <span class="value-text">¥{{ record.stock * record.price }}</span>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="viewDetail(record)">
                详情
              </Button>
              <Button type="link" size="small" @click="editItem(record)">
                编辑
              </Button>
              <Button type="link" size="small" @click="viewHistory(record)">
                记录
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 新增配件弹窗 -->
    <Modal
      v-model:open="showAddItemModal"
      title="新增配件"
      width="700px"
      @ok="handleSaveItem"
      @cancel="handleCancelItem"
    >
      <Form
        ref="itemFormRef"
        :model="itemForm"
        :rules="itemRules"
        layout="vertical"
      >
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="配件名称" name="name">
              <Input
                v-model:value="itemForm.name"
                placeholder="请输入配件名称"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="配件编码" name="code">
              <Input
                v-model:value="itemForm.code"
                placeholder="请输入配件编码"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="配件类型" name="category">
              <Select
                v-model:value="itemForm.category"
                placeholder="请选择配件类型"
              >
                <SelectOption value="electrical">电气配件</SelectOption>
                <SelectOption value="plumbing">水管配件</SelectOption>
                <SelectOption value="appliance">家电配件</SelectOption>
                <SelectOption value="furniture">家具配件</SelectOption>
                <SelectOption value="structural">结构配件</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="供应商" name="supplier">
              <Select
                v-model:value="itemForm.supplier"
                placeholder="请选择供应商"
                show-search
              >
                <SelectOption
                  v-for="supplier in suppliers"
                  :key="supplier.id"
                  :value="supplier.name"
                >
                  {{ supplier.name }}
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="8">
            <FormItem label="单价" name="price">
              <Input
                v-model:value="itemForm.price"
                type="number"
                placeholder="请输入单价"
                addon-after="元"
              />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="初始库存" name="stock">
              <Input
                v-model:value="itemForm.stock"
                type="number"
                placeholder="请输入库存数量"
              />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="最低库存" name="minStock">
              <Input
                v-model:value="itemForm.minStock"
                type="number"
                placeholder="请输入最低库存"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="规格型号" name="specification">
          <Input
            v-model:value="itemForm.specification"
            placeholder="请输入规格型号"
          />
        </FormItem>
        <FormItem label="备注" name="remarks">
          <Textarea
            v-model:value="itemForm.remarks"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 入库弹窗 -->
    <Modal
      v-model:open="showInboundModal"
      title="配件入库"
      width="600px"
      @ok="handleInbound"
      @cancel="showInboundModal = false"
    >
      <Form
        ref="inboundFormRef"
        :model="inboundForm"
        :rules="inboundRules"
        layout="vertical"
      >
        <FormItem label="配件" name="itemId">
          <Select
            v-model:value="inboundForm.itemId"
            placeholder="请选择配件"
            show-search
          >
            <SelectOption
              v-for="item in inventoryItems"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }} ({{ item.code }})
            </SelectOption>
          </Select>
        </FormItem>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="入库数量" name="quantity">
              <Input
                v-model:value="inboundForm.quantity"
                type="number"
                placeholder="请输入数量"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="入库单价" name="price">
              <Input
                v-model:value="inboundForm.price"
                type="number"
                placeholder="请输入单价"
                addon-after="元"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="供应商" name="supplier">
          <Select
            v-model:value="inboundForm.supplier"
            placeholder="请选择供应商"
          >
            <SelectOption
              v-for="supplier in suppliers"
              :key="supplier.id"
              :value="supplier.name"
            >
              {{ supplier.name }}
            </SelectOption>
          </Select>
        </FormItem>
        <FormItem label="入库原因" name="reason">
          <Select
            v-model:value="inboundForm.reason"
            placeholder="请选择入库原因"
          >
            <SelectOption value="purchase">采购入库</SelectOption>
            <SelectOption value="return">退货入库</SelectOption>
            <SelectOption value="transfer">调拨入库</SelectOption>
            <SelectOption value="other">其他</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="备注" name="remarks">
          <Textarea
            v-model:value="inboundForm.remarks"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 出库弹窗 -->
    <Modal
      v-model:open="showOutboundModal"
      title="配件出库"
      width="600px"
      @ok="handleOutbound"
      @cancel="showOutboundModal = false"
    >
      <Form
        ref="outboundFormRef"
        :model="outboundForm"
        :rules="outboundRules"
        layout="vertical"
      >
        <FormItem label="配件" name="itemId">
          <Select
            v-model:value="outboundForm.itemId"
            placeholder="请选择配件"
            show-search
          >
            <SelectOption
              v-for="item in availableItems"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }} (库存: {{ item.stock }})
            </SelectOption>
          </Select>
        </FormItem>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="出库数量" name="quantity">
              <Input
                v-model:value="outboundForm.quantity"
                type="number"
                placeholder="请输入数量"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="出库单价" name="price">
              <Input
                v-model:value="outboundForm.price"
                type="number"
                placeholder="请输入单价"
                addon-after="元"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="出库原因" name="reason">
          <Select
            v-model:value="outboundForm.reason"
            placeholder="请选择出库原因"
          >
            <SelectOption value="maintenance">维修使用</SelectOption>
            <SelectOption value="sale">销售出库</SelectOption>
            <SelectOption value="transfer">调拨出库</SelectOption>
            <SelectOption value="damage">损坏报废</SelectOption>
            <SelectOption value="other">其他</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="工单号" name="workOrderNumber">
          <Input
            v-model:value="outboundForm.workOrderNumber"
            placeholder="请输入工单号（维修使用必填）"
          />
        </FormItem>
        <FormItem label="备注" name="remarks">
          <Textarea
            v-model:value="outboundForm.remarks"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 详情弹窗 -->
    <Modal
      v-model:open="showDetailModal"
      title="配件详情"
      width="800px"
      :footer="null"
    >
      <Descriptions :column="2" bordered>
        <DescriptionsItem label="配件名称">
          {{ selectedItem?.name }}
        </DescriptionsItem>
        <DescriptionsItem label="配件编码">
          {{ selectedItem?.code }}
        </DescriptionsItem>
        <DescriptionsItem label="配件类型">
          <Tag :color="getCategoryColor(selectedItem?.category)">
            {{ getCategoryText(selectedItem?.category) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="规格型号">
          {{ selectedItem?.specification }}
        </DescriptionsItem>
        <DescriptionsItem label="供应商">
          {{ selectedItem?.supplier }}
        </DescriptionsItem>
        <DescriptionsItem label="当前库存">
          {{ selectedItem?.stock }}
        </DescriptionsItem>
        <DescriptionsItem label="最低库存">
          {{ selectedItem?.minStock }}
        </DescriptionsItem>
        <DescriptionsItem label="库存状态">
          <Tag :color="getStatusColor(selectedItem?.status)">
            {{ getStatusText(selectedItem?.status) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="单价">
          ¥{{ selectedItem?.price }}
        </DescriptionsItem>
        <DescriptionsItem label="库存总值">
          ¥{{ selectedItem?.stock * selectedItem?.price }}
        </DescriptionsItem>
        <DescriptionsItem label="备注" :span="2">
          {{ selectedItem?.remarks || '无' }}
        </DescriptionsItem>
      </Descriptions>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import StatisticsCard from '#/components/hotel/StatisticsCard.vue';
import {
  Button,
  Card,
  Col,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Progress,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
} from 'ant-design-vue';

// 状态管理
const loading = ref(false);
const showAddItemModal = ref(false);
const showInboundModal = ref(false);
const showOutboundModal = ref(false);
const showDetailModal = ref(false);
const isEdit = ref(false);
const selectedItem = ref(null);

// 表单引用
const itemFormRef = ref();
const inboundFormRef = ref();
const outboundFormRef = ref();

// 统计数据
const statistics = reactive({
  totalItems: 156,
  totalChange: 8,
  totalValue: '45,680',
  valueChange: 12.5,
  warningItems: 12,
  warningChange: -3,
  monthlyTransactions: 89,
  transactionChange: 15,
});

// 搜索表单
const searchForm = reactive({
  name: '',
  category: '',
  supplier: '',
  status: '',
});

// 配件表单
const itemForm = reactive({
  name: '',
  code: '',
  category: '',
  supplier: '',
  price: '',
  stock: '',
  minStock: '',
  specification: '',
  remarks: '',
});

// 入库表单
const inboundForm = reactive({
  itemId: '',
  quantity: '',
  price: '',
  supplier: '',
  reason: '',
  remarks: '',
});

// 出库表单
const outboundForm = reactive({
  itemId: '',
  quantity: '',
  price: '',
  reason: '',
  workOrderNumber: '',
  remarks: '',
});

// 表单验证规则
const itemRules = {
  name: [{ required: true, message: '请输入配件名称' }],
  code: [{ required: true, message: '请输入配件编码' }],
  category: [{ required: true, message: '请选择配件类型' }],
  supplier: [{ required: true, message: '请选择供应商' }],
  price: [{ required: true, message: '请输入单价' }],
  stock: [{ required: true, message: '请输入库存数量' }],
  minStock: [{ required: true, message: '请输入最低库存' }],
};

const inboundRules = {
  itemId: [{ required: true, message: '请选择配件' }],
  quantity: [{ required: true, message: '请输入入库数量' }],
  price: [{ required: true, message: '请输入入库单价' }],
  supplier: [{ required: true, message: '请选择供应商' }],
  reason: [{ required: true, message: '请选择入库原因' }],
};

const outboundRules = {
  itemId: [{ required: true, message: '请选择配件' }],
  quantity: [{ required: true, message: '请输入出库数量' }],
  price: [{ required: true, message: '请输入出库单价' }],
  reason: [{ required: true, message: '请选择出库原因' }],
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 供应商数据
const suppliers = ref([
  { id: 1, name: '上海电气配件有限公司' },
  { id: 2, name: '北京水管配件厂' },
  { id: 3, name: '广州家电配件商行' },
  { id: 4, name: '深圳家具配件有限公司' },
  { id: 5, name: '杭州结构配件厂' },
]);

// 库存数据
const inventoryItems = ref([
  {
    id: 1,
    name: '电线',
    code: 'DX-001',
    category: 'electrical',
    supplier: '上海电气配件有限公司',
    price: 10,
    stock: 500,
    minStock: 100,
    specification: '2.5mm² 铜芯线',
    status: 'normal',
    remarks: '常用电气配件',
  },
  {
    id: 2,
    name: '插座',
    code: 'CZ-001',
    category: 'electrical',
    supplier: '上海电气配件有限公司',
    price: 15,
    stock: 200,
    minStock: 50,
    specification: '五孔插座',
    status: 'normal',
    remarks: '标准五孔插座',
  },
  {
    id: 3,
    name: '水龙头',
    code: 'SLT-001',
    category: 'plumbing',
    supplier: '北京水管配件厂',
    price: 80,
    stock: 30,
    minStock: 20,
    specification: '单把手水龙头',
    status: 'warning',
    remarks: '卫生间用',
  },
  {
    id: 4,
    name: '密封圈',
    code: 'MFQ-001',
    category: 'plumbing',
    supplier: '北京水管配件厂',
    price: 5,
    stock: 8,
    minStock: 50,
    specification: '标准密封圈',
    status: 'out_of_stock',
    remarks: '水龙头密封用',
  },
  {
    id: 5,
    name: '空调遥控器',
    code: 'KTYKQ-001',
    category: 'appliance',
    supplier: '广州家电配件商行',
    price: 25,
    stock: 15,
    minStock: 10,
    specification: '通用遥控器',
    status: 'warning',
    remarks: '空调遥控器',
  },
]);

// 表格列定义
const columns = [
  {
    title: '配件名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '配件类型',
    dataIndex: 'category',
    key: 'category',
    width: 120,
  },
  {
    title: '规格型号',
    dataIndex: 'specification',
    key: 'specification',
    width: 150,
  },
  {
    title: '供应商',
    dataIndex: 'supplier',
    key: 'supplier',
    width: 180,
  },
  {
    title: '库存',
    dataIndex: 'stock',
    key: 'stock',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    width: 100,
  },
  {
    title: '库存总值',
    dataIndex: 'totalValue',
    key: 'totalValue',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right',
  },
];

// 过滤后的库存数据
const filteredInventory = computed(() => {
  let result = inventoryItems.value;

  if (searchForm.name) {
    result = result.filter((item) =>
      item.name.toLowerCase().includes(searchForm.name.toLowerCase()),
    );
  }

  if (searchForm.category) {
    result = result.filter((item) => item.category === searchForm.category);
  }

  if (searchForm.supplier) {
    result = result.filter((item) =>
      item.supplier.toLowerCase().includes(searchForm.supplier.toLowerCase()),
    );
  }

  if (searchForm.status) {
    result = result.filter((item) => item.status === searchForm.status);
  }

  return result;
});

// 预警项目
const warningItems = computed(() => {
  return inventoryItems.value.filter(
    (item) => item.status === 'warning' || item.status === 'out_of_stock',
  );
});

// 可用项目（有库存的）
const availableItems = computed(() => {
  return inventoryItems.value.filter((item) => item.stock > 0);
});

// 类型相关函数
const getCategoryColor = (category: string) => {
  const colors: Record<string, string> = {
    electrical: 'blue',
    plumbing: 'cyan',
    appliance: 'green',
    furniture: 'orange',
    structural: 'red',
  };
  return colors[category] || 'default';
};

const getCategoryText = (category: string) => {
  const texts: Record<string, string> = {
    electrical: '电气配件',
    plumbing: '水管配件',
    appliance: '家电配件',
    furniture: '家具配件',
    structural: '结构配件',
  };
  return texts[category] || category;
};

// 状态相关函数
const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    normal: 'green',
    warning: 'orange',
    out_of_stock: 'red',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    normal: '正常',
    warning: '预警',
    out_of_stock: '缺货',
  };
  return texts[status] || status;
};

// 库存相关函数
const getStockPercent = (item: any) => {
  const percent = (item.stock / item.minStock) * 100;
  return Math.min(percent, 100);
};

const getStockColor = (item: any) => {
  if (item.stock <= item.minStock) return '#f5222d';
  if (item.stock <= item.minStock * 1.5) return '#faad14';
  return '#52c41a';
};

// 事件处理函数
const handleSearch = () => {
  pagination.current = 1;
  message.success('搜索完成');
};

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    category: '',
    supplier: '',
    status: '',
  });
  pagination.current = 1;
  message.success('重置完成');
};

const handleSaveItem = async () => {
  try {
    await itemFormRef.value.validate();
    if (isEdit.value) {
      message.success('配件信息更新成功');
    } else {
      message.success('配件添加成功');
    }
    showAddItemModal.value = false;
    resetItemForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancelItem = () => {
  showAddItemModal.value = false;
  resetItemForm();
};

const handleInbound = async () => {
  try {
    await inboundFormRef.value.validate();
    message.success('入库操作成功');
    showInboundModal.value = false;
    resetInboundForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleOutbound = async () => {
  try {
    await outboundFormRef.value.validate();
    message.success('出库操作成功');
    showOutboundModal.value = false;
    resetOutboundForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const viewDetail = (record: any) => {
  selectedItem.value = record;
  showDetailModal.value = true;
};

const editItem = (record: any) => {
  isEdit.value = true;
  Object.assign(itemForm, record);
  showAddItemModal.value = true;
};

const viewHistory = (record: any) => {
  message.info(`查看库存记录: ${record.name}`);
};

const quickReplenish = (item: any) => {
  inboundForm.itemId = item.id;
  inboundForm.quantity = (item.minStock - item.stock + 10).toString();
  inboundForm.price = item.price.toString();
  inboundForm.supplier = item.supplier;
  inboundForm.reason = 'purchase';
  showInboundModal.value = true;
};

const resetItemForm = () => {
  Object.assign(itemForm, {
    name: '',
    code: '',
    category: '',
    supplier: '',
    price: '',
    stock: '',
    minStock: '',
    specification: '',
    remarks: '',
  });
  isEdit.value = false;
};

const resetInboundForm = () => {
  Object.assign(inboundForm, {
    itemId: '',
    quantity: '',
    price: '',
    supplier: '',
    reason: '',
    remarks: '',
  });
};

const resetOutboundForm = () => {
  Object.assign(outboundForm, {
    itemId: '',
    quantity: '',
    price: '',
    reason: '',
    workOrderNumber: '',
    remarks: '',
  });
};

onMounted(() => {
  // 初始化数据
  pagination.total = inventoryItems.value.length;
});
</script>

<style scoped>
.inventory-management {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.statistics-row {
  margin-bottom: 24px;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.warning-card {
  margin-bottom: 16px;
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
}

.warning-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-name {
  font-weight: 500;
  color: #d46b08;
}

.item-code {
  font-size: 12px;
  color: #999;
}

.warning-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stock-count {
  font-size: 12px;
  color: #666;
}

.table-card {
  margin-bottom: 16px;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-name {
  font-weight: 500;
}

.item-code {
  font-size: 12px;
  color: #999;
}

.stock-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stock-count {
  font-weight: 500;
  color: #1890ff;
}

.price-text {
  font-weight: 500;
  color: #f5222d;
}

.value-text {
  font-weight: 500;
  color: #52c41a;
}

:deep(.ant-card-body) {
  padding: 12px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background-color: #fafafa;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}

:deep(.ant-progress-bg) {
  height: 4px;
}
</style>
